<template>
  <div id="noAuthPage">
    <div class="content-wrapper">
      <transition name="fade" appear>
        <div class="error-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
        </div>
      </transition>

      <h1 class="title">访问权限不足</h1>

      <p class="description">
        抱歉，您暂时没有权限访问该页面。如需访问，请联系系统管理员申请权限。
        <br>
        错误代码：403 Forbidden
      </p>

      <div class="action-buttons">
        <router-link to="/" class="home-button">
          返回首页
        </router-link>
        <a href="mailto:admin@example.com" class="contact-button">
          联系管理员
        </a>
      </div>
    </div>
  </div>
</template>
<script setup>

</script>
<style scoped>
#noAuthPage {
  display: flex;
  min-height: 100%;
  padding: 2rem;
}

.content-wrapper {
  max-width: 600px;
  margin: auto;
  text-align: center;
  padding: 2.5rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-icon {
  color: #ff4d4f;
  margin-bottom: 1.5rem;
  animation: icon-float 3s ease-in-out infinite;
}

.title {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

.description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #636e72;
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.home-button,
.contact-button {
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
}

.home-button {
  background-color: #1890ff;
  color: white;
  border: 2px solid transparent;
}

.home-button:hover {
  background-color: #40a9ff;
  transform: translateY(-2px);
}

.contact-button {
  background-color: white;
  color: #1890ff;
  border: 2px solid #1890ff;
}

.contact-button:hover {
  background-color: #e6f7ff;
  transform: translateY(-2px);
}

/* 动画效果 */
@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.fade-enter-active {
  transition: opacity 1s ease;
}
.fade-enter-from {
  opacity: 0;
}

@media (max-width: 640px) {
  .content-wrapper {
    padding: 1.5rem;
    margin: 1rem;
  }

  .title {
    font-size: 1.5rem;
  }

  .description {
    font-size: 1rem;
  }
}
</style>

